<template>

    <el-dialog title="消息列表" class="task-dialog task-detail" append-to-body="true" :visible.sync="dialogVisible" width="75%" center>
        <el-row>
            <el-col :span="12">
                <el-radio-group v-model="isRead" @tabClick="isReadClick" style="margin-bottom: 30px;">
                    <el-radio-button label="0">未读</el-radio-button>
                    <el-radio-button label="1">已读</el-radio-button>
                </el-radio-group>
            </el-col>
            <el-col :span="12" style="text-align: right;">
                <el-button type="primary" v-if="isRead=='0'" size="mini" @click="selectedRead">
                    批量已读标记
                </el-button>
                <el-button type="primary" v-else size="mini" @click="selectedDelete">
                    批量删除
                </el-button>
            </el-col>
        </el-row>
        <el-table :data="dataList" ref="multipleTableRef" border @selection-change="handleSelectionChange" class="fnd-table" tooltip-effect="dark" stripe style="width:100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column property="createTime" :formatter= "timeFormat" label="时间" width="120"></el-table-column>
            <el-table-column property="messageContent" show-overflow-tooltip label="内容"></el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="scope">
                    <el-button v-if="isRead=='0'" @click="handleClick(scope.$index,scope.row)"  size="small">标记已读</el-button>
                    <el-button v-else @click="handleDelete(scope.$index,scope.row)" type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row style="margin-top:20px">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="page.pageNum"
                    :page-size="page.pageSize"
                    layout="total,prev,pager,next"
                    :total="page.total"
            ></el-pagination>
        </el-row>
    </el-dialog>
</template>

<script setup lang="ts">
    import {reactive,ref,computed,toRefs} from "vue"
    import {queryMessage, updateMessageStatus} from "@/api/recovery";
    import {ElTable,ElMessage,ElMessageBox} from "element-plus";
    const props=defineProps({
        visible:{
            type:Boolean,
            default(){
                return false;
            }
        },
        registNo:{
            default:''
        }
    })
    interface Message{
        createTime:string,
        messageContent:string
    }
    let dataList:Message[]=[]
    const isRead=ref('0')
    let page=reactive({})
    const multipleSelection=ref<Message[]>([])
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const {visible,registNo}=toRefs(props)
    const emit=defineEmits(['update'])
    const updateMessage=(row,type:any)=>{
        if(!Array.isArray(row)){
            var arr:Message[]=[];
            arr.push(row);
        } else {
            arr= row;
        }
        updateMessageStatus({requestType:type,requestBody:arr})
        .then(res=>{
            if(res.responseCode==='000000'){
                let message=""
                if(type=='1'){
                    message='标记已读成功'
                }else{
                    message="删除成功"
                }
                ElMessage.success(message)
            }
        })
    }
    const handleClick=(index:number,row:Message)=>{
        updateMessage(row,'1')
    }
    const handleDelete=(index:number,row:Message)=>{
        ElMessageBox.confirm('请确认是否删除','提示',{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        }).then(function () {
            updateMessage(row,'2')
        }).catch(function () {
            ElMessage.info('已取消删除')
        })
    }
    const selectRead=()=>{
        updateMessage(multipleSelection,'1')
    }
    const selectedDelete=()=>{
        ElMessageBox.confirm('请确定是否批量删除','提示',{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        }).then(function () {
            updateMessage(multipleSelection,'2')
        }).catch(function () {
            ElMessage.info("已取消删除")
        })
    }
    const isReadClick=(tab)=>{
        queryList(1)
    }
    const handleSelectionChange=(val:Message[])=>{
        multipleSelection.value=val
    }
    const queryList=(val)=>{
        queryMessage({requestType:isRead.value,requestBody:{pageNum:val,pageSize:5}})//0表示未读，1表示已读
        .then(res=>{
            if(res.responseCode==='000000'){
                dataList=res.responseData.result
                page={
                    pageNum:res.responseData.pageNum,
                    pageSize:res.responseData.pageSize,
                    total:res.responseData.total,
                }
            }
        })
    }
    const handleCurrentChange=(val)=>{
        queryList(val)
    }
    const timeFormat=(row)=>{
        timeFormat(row.createTime)
    }
    const dialogVisible=computed({
        get(val){
            if(visible){
                queryList(1)
            }
        },
        set(val){
            const handleUpdate=(val)=>{
                emit('update',val)
            }
        },
    })
</script>

<style scoped>
    .task-detail .table-footer .el-select {
        width: 100px;
    }
    .task-detail .table-footer .el-select .el-input{
        width: 100%;
    }
    .task-detail .table-footer .el-input {
        width: 120px;
    }
    .task-dialog .el-dialog__header {
        background-color: #409EFF;
    }
    .task-dialog .el-dialog__title,
    .task-dialog .el-dialog__headerbtn .el-dialog__close {
        color: #fff;
    }
    .task-dialog thead .el-table-column--selection .cell {
        display: none;
    }
    .fnd-table th.must div:before {
        content: '*';
        color: #f00;
    }
    .task-detail .el-link.el-link--primary {
        margin-top: -10px;
    }
    .task-detail .el-collapse-item__header {
        border-left: 5px solid #409EFF;
        font-size: 16px;
        font-weight: bold;
        padding-left: 10px;
        background-color: #e1ecf5;
    }
    .task-detail .el-collapse-item__wrap {
        border-top: 1px solid #EBEEF5;
        padding: 10px;
    }
    .task-detail .el-select {
        width: 100%;
    }
</style>
